<html >
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../layui-v2.9.0/layui/css/layui.css" media="all">
    <script src="../layui-v2.9.0/layui/layui.js"></script>
</head>
<body>

<style>
    .demo-login-container{width: 320px; margin: 21px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
    .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 80px 0;
        height: 400px;
        text-align: center;
    }
    .container h1 {
        font-size: 40px;
        transition-duration: 1s;
        font-weight: 200;
    }
</style>
<div class="wrapper" style="color: black">
    <div class="container">
        <h1>Welcome</h1>
        <form class="layui-form" >
            <div class="demo-login-container">
                <div class="layui-form-item" >
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="userName" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-vercode"></i>
                                </div>
                                <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img src="/checkCode" onclick="this.src='/checkCode?'+new Date()">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
                </div>
                <div class="layui-form-item demo-login-other" style="text-align: center">
                    <a href="/user/regHtml">注册帐号</a>
                </div>
            </div>
        </form>
    </div>
    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<script>
    // 提交事件
    layui.use(function() {
        var form = layui.form;
        form.on('submit(demo-login)', function (data) {
            var field = data.field; // 获取表单字段值
            var layer = layui.layer;
            var $ = layui.$;
            console.log(field);
            // 此处可执行 Ajax 等操作
            // …
            $.ajax({
                url: '/user/userLogin',
                type: 'POST',
                data: field,
                success: function (response) {
                    // 处理响应
                    layer.msg(response);
                    if (response === "登录成功") {
                        setTimeout(function () {
                            window.location.href = "/forward/indexPage";
                        }, 1500);
                    }
                },
                error: function (response) {
                    layer.msg(response);
                }
            });
            return false; // 阻止默认 form 跳转
        });
    })
</script>
<script src="../js/index.js">

</script>
</body>
</html>